<template>
  <div>
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="门店名称">
          <el-input v-model="searchForm.s_name" placeholder="请输入门店名称" clearable />
        </el-form-item>
        <el-form-item label="门店电话">
          <el-input v-model="searchForm.s_telphone" placeholder="请输入门店电话" clearable />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
      </h5>
      <el-button size="small" class="add-btn" icon="el-icon-plus" @click="openAddDialog()">添加门店</el-button>
      <!-- <el-button v-if="$hasMethod('#add')" size="small" class="add-btn" icon="el-icon-plus" @click="openAddDialog()">添加账号</el-button> -->
    </div>
    <el-table v-show="tableData.length > -1" :data="tableData" border>
      <el-table-column align="center" prop="id" label="ID" width="70" />
      <el-table-column align="center" prop="s_name" label="门店名称" />
      <el-table-column align="center" prop="s_telphone" label="门店电话" />
      <el-table-column align="center" prop="s_address" label="门店地址" />
      <el-table-column align="center" prop="s_people" label="联系人" />
      <el-table-column align="center" prop="s_amount" label="支付宝账户名称" />
      <el-table-column align="center" prop="s_alipay_number" label="支付宝账户" />
      <el-table-column align="center" label="营业执照">
        <template slot-scope="scope">
          <el-image
            style="width:50px;height:50px"
            fit="fill"
            :src="$globalObj.imgBaseUrl + scope.row.s_company_img"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="门头照">
        <template slot-scope="scope">
          <el-image
            style="width:50px;height:50px"
            fit="fill"
            :src="$globalObj.imgBaseUrl + scope.row.s_door_img"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="240">
        <template slot-scope="scope">
          <!-- <el-button v-if="$hasMethod('#view')" type="primary" size="mini" @click="openEdit(scope.row)">编辑</el-button> -->
          <el-button type="primary" size="mini" @click="openEdit(scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="delShop(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-shop ref="addShop" :mode="formMode" @getList="getList"></add-shop>
    <custom-page ref="customPage" :total="total" @getList="getList" />
  </div>
</template>

<script>
import { editSupplier, shopList, delShopData } from '@/api/user'
import customPage from '@/components/customPage'
import AddShop from './components/addShop.vue'
export default {
  components: { customPage, AddShop },
  data() {
    return {
      searchForm: {
        s_name: '',
        s_telphone: '',
      },
      total: 0,
      tableData: [],
      routerName: '',
      formMode: 'add',
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    openEdit(row) {
      this.formMode = 'edit'
      this.$refs.addShop.initSetForm(row, true)
    },
    delShop(row) {
      this.$confirm('是否删除该门店?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          delShopData({ id: row.id })
            .then((res) => {
              if (res) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                })
                this.getList()
              }
            })
            .catch((e) => {
              this.$message({
                type: 'error',
                message: '操作失败',
              })
            })
        })
        .catch(() => {})
    },
    openAddDialog() {
      this.formMode = 'add'
      this.$refs.addShop.initSetForm(false, true)
    },
    handleMore(command, item) {
      if (command === 'edit') {
        // 编辑资料
        this.$router.push({ name: 'supplierView', params: { viewId: item.id, toEdit: true } })
      } else {
        // 查看备注
      }
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      this.searchForm = {
        s_name: '',
        s_telphone: '',
      }
      this.routerName = ''
      this.getList()
    },
    // 启用/禁用
    enable(id, endisable) {
      editSupplier({
        id,
        endisable: endisable === 1 ? 2 : 1,
      }).then((res) => {
        this.getList(true)
      })
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      shopList({ page, pageSize, ...this.searchForm }).then((res) => {
        this.tableData = res.data || []
        this.total = res.total
      })
    },
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'storesList') {
      next((vm) => {
        vm.getList()
      })
    } else {
      next()
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
